// pages/recommend/recommend.js
import { getImage } from '../../utils/api'
Page({

    /**
     * 页面的初始数据
     */
    data: {
        url: "",
        imgInfo: "",
        nowPgae: 1,
        startX: 0,
        slider: false,
        animationData: {},
        arr: [
            { url: '../../public/bg-img/a.jpg' },
            { url: '../../public/bg-img/b.jpg' },
            { url: '../../public/bg-img/c.jpg' },
            { url: '../../images/water.jpg' },
            { url: '../../images/mountain.jpg' },
            
           
        ],
        indicatorDots: true,  //是否显示面板指示点
        autoplay: true,      //是否自动切换
        interval: 3000,       //自动切换时间间隔
        duration: 1000,       //滑动动画时长
        inputShowed: false,
        inputVal: "",
        count: 0
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function () {
        wx.showLoading({
            title: '加载中',
        })

        setTimeout(function () {
            wx.hideLoading()
        }, 3500)

    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

        // if(this.data.count == 0){
        getImage().then(res => {
            // console.log(res)
            for (let i = 0; i < res.length; i++) {
                let j = i
                j = j % 5
                // console.log(i,j)
                res[i][0] = { ...res[i][0], ...this.data.arr[j] }
                // console.log(res[i][0])
            }
            let remainder = this.data.count % 3
            if (remainder === 0) {
            } else if (remainder === 1) {
            }else if (remainder === 2) {
            }else if (remainder === 3) {
            } 
            else {
            }
            // console.log(res)
            this.setData({
                imgInfo: res,
                // url:result
            })
        })
        // }
    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },
    click(e) {
        let name = e.currentTarget.dataset.index[0].name
        let author = e.currentTarget.dataset.index[0].author
        console.log(name,author)
        wx.navigateTo({
            // url: `../details/details?name=${JSON.stringify('枫桥夜泊 / 夜泊枫江')}&author=张继`
            url: `../details/details?name=${JSON.stringify(e.currentTarget.dataset.index[0].name)}&author=${author}`
        })

    },
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    },
    touchstart(e) {
        this.setData({
            startX: e.changedTouches[0].clientX,
        })
    },
    touchend(e) {
        let that = this;
        let startX = this.data.startX;
        let endX = e.changedTouches[0].clientX;
        if (this.data.slider) return;

        // 下一页(左滑距离大于30)
        if (startX - endX > 30) {
            this.setData({
                slider: true
            });
            //尾页(当前页 等于 总页数)
            if (this.data.nowPgae == this.data.imgInfo.length) {
                this.setData({
                    slider: false,
                    nowPgae: 1
                });
                // wx.showToast({title: '已经是最后一张了',icon:'none'});
                return;
            };

            //创建动画   5s将位置移动到-150%,-150%
            let animation = wx.createAnimation({
                duration: 500,
            });
            animation.translateX('-150%').translateY('-150%').rotate(60).step();
            this.setData({
                animationData: animation.export()
            });

            // 移动完成后
            setTimeout(function () {
                var slidethis = that.data.imgInfo.shift(); //删除数组第一项
                that.data.imgInfo.push(slidethis); //将第一项放到末尾
                //创建动画   将位置归位
                let animation = wx.createAnimation({
                    duration: 0,
                });
                animation.translateX('-53%').translateY('-50%').rotate(0).step();
                that.setData({
                    imgInfo: that.data.imgInfo,
                    animationData: animation.export(),
                    slider: false,
                    nowPgae: that.data.nowPgae + 1,
                });
            }, 400)
        }

        // 上一页
        if (endX - startX > 30) {
            this.setData({
                slider: true
            })
            //首页
            if (this.data.nowPgae == 1) {
                this.setData({
                    slider: false,
                    nowPgae: 4
                })

                return;
            };

            //创建动画  移动到-150%,-150%
            let animation = wx.createAnimation({
                duration: 0,
            });
            animation.translateX('-150%').translateY('-150%').rotate(100).step();



            var slidethis = that.data.imgInfo.pop(); //删除数组末尾项
            that.data.imgInfo.unshift(slidethis);//将删除的末尾项放到第一项
            that.setData({
                animationData: animation.export(),
                imgInfo: that.data.imgInfo,
            });

            setTimeout(function () {
                //创建动画   5s将位置移动到原位
                let animation2 = wx.createAnimation({
                    duration: 500,
                    // timingFunction: 'cubic-bezier(.8,.1,.2,0.8)',
                });
                animation2.translateX('-53%').translateY('-50%').rotate(0).step();
                that.setData({
                    animationData: animation2.export()
                });

                // getFlash().then(res => {
                //     console.log(res)
                // })

                that.setData({
                    slider: false,
                    nowPgae: that.data.nowPgae - 1
                });
            }, 50)
        }
    },
})